﻿<div class="container">
    <div class="row" ng-repeat="ed in educations">
        <div class="col-md-6">
            <h2>
                {{ed.name}}
                <button title="remove {{ed.name}}" class="btn btn-xs btn-danger col-md-1 pull-right" ng-click="remove(ed)"><i class="glyphicon glyphicon-remove"></i></button>
                <button title="edit {{ed.name}}" class="btn btn-xs btn-info col-md-1 pull-right" ng-click="edit(ed)"><i class="glyphicon glyphicon-edit"></i></button>

            </h2>
            <div>address:{{ed.address}}</div>
            <div>city:{{ed.city}}, state:{{ed.state}}</div>
            <div>degree:{{ed.degree}}</div>
            <button class="btn btn-sm btn-link" ng-click="onCollapsed()">Show/hide associated resumes</button>
            <div data-collapse="isCollapsed">
                <div ng-if="!ed.resumes.length">
                    There are no resumes associated with {{ed.name}}
                </div>
                <div ng-if="ed.resumes.length">
                    <div ng-repeat="resume in ed.resumes" >id: {{resume.id}} name:{{resume.name}}</div>   
                </div>
            </div>
        </div>
        
    </div>
    
</div>